<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-main>
      <el-row type="flex" justify="center">
        <el-col :span="12">
          <div class="text-container">
            <span>禁止访问</span>
            <p class="text-container-message">您可能没有该页面访问权限</p>
            <el-button @click="goIndex">去首页</el-button>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  name: 'Page403',
  components: {
    Header,
    Footer
  },
  methods: {
    goIndex () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  min-height: calc(100vh - 149px);
}
.text-container {
  text-align: center;
  margin-bottom: 8px;
  margin-top: 20vh;
  font-size: 38px;
  font-weight: 500;
  color: #262626;
}
.text-container-message {
  max-width: 380px;
  font-size: 16px;
  margin: 10px auto;
  color: darkgray;
}
</style>
